<template>
	<view class="back-color" :class="isFixedHead ? 'fixed-top' : ''" :style="{ background: backgroundColor }">
		<view style="width: 100rpx; height: 70rpx; line-height: 55rpx; text-align: center; transform: scaleX(0.4); font-weight: bold; font-size: 75rpx;" :style="{ visibility: (showGoBack ? '' : 'hidden'), color: fontColor }" @click="goBack()">{{ left }}</view>
		<view style="font-size: 34rpx; font-weight: bold;" :style="{ color: fontColor }">{{ title }}</view>
		<view style="width: 100rpx;" />
	</view>
</template>

<script>
	export default {
		props: {
			isFixedHead: {
				type: Boolean,
				default: true
			},
			showGoBack: {
				type: Boolean,
				default: true
			},
			title: {
				type: [String, Function],
				default: ''
			},
			fontColor: {
				type: String,
				default: 'white'
			},
			backgroundColor: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				left: '<'
			}
		},
		methods: {
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style scoped>
	.fixed-top {
		position: sticky;
		top: 0;
		/* z-index: -99; */
	}
	.back-color {
		width: 100vw;
		height: 12vh;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 5vh 0 0 0;
		z-index: 99;
	}
</style>